<template>
  <div>
    <ul class="map-control">
      <li
        v-for="(item,index) in els"
        :key="index"
        :class="item.type"
        @click="setVisible(item.type)"
        :title="item.tooltip"
      >
        <div class="line" v-if="index !==0"></div>
        <div class="tubiao">
          <i :class="item.class"></i>
        </div>
      </li>
    </ul>
    <Layers
      v-show="layersVisible"
      @close="layersVisible=false"
      :overLayerData="overLayerData"
      @getOtherLegendHidden="getOtherLegendHidden"
      @getOtherLegendVisible="getOtherLegendVisible"
      ref="layers_zw"
    ></Layers>
    <!-- 专题图层的图例 -->
    <legend-frame :otherLegend="otherLegends" @closeLegend="closeLegend" ref="legendFrame"></legend-frame>
    <!-- 表格 -->
    <!-- <Table></Table> -->
  </div>
</template>

<script>
import Layers from './layers'
// import Table from './table'
import LegendFrame from '@/components/LegendFrame/index'
export default {
  name: 'MapControl',
  props: ['overLayerData'],
  data () {
    return {
      els: [
        {
          class: 'iconfont icon-ditu',
          type: 'layercontrol-layer',
          tooltip: '底图'
        },
        {
          class: 'iconfont icon-biaoge',
          type: 'layercontrol-table',
          tooltip: '表格'
        },
        {
          class: 'iconfont icon-tongjitubiao',
          type: 'layercontrol-echarts',
          tooltip: '图表'
        }
      ],
      layersVisible: false,
      otherLegends: []
    }
  },
  components: { Layers, LegendFrame },
  methods: {
    setVisible (type) {
      switch (type) {
        case 'layercontrol-layer':
          this.layersVisible = !this.layersVisible
          break
        case 'layercontrol-table':
          this.layersVisible = !this.layersVisible
          break
      }
    },
    getOtherLegendVisible (item) {
      this.otherLegends = item
    },
    getOtherLegendHidden (item) {
      this.otherLegends = item
      this.$refs.legendFrame.ColorPickerVisible = false
    },
    closeLegend (item) {
      let key = ''
      let res = ''
      this.$refs.layers_zw.overLayerData.forEach((value, index) => {
        if (value.layerId === item.layerId) {
          key = index
          res = item
        }
      })
      this.$refs.layers_zw.setOverLayerHidden(res, key)
    }
  }
}
</script>

<style  rel='stylesheet' lang='scss' scoped>
@import "./../../assets/css/rule.scss";
$width: 38px;
$fontColor: #bbb;
.map-control {
  padding: 0;
  margin: 0;
  width: $width;
  color: $fontColor;
  background: $backGroundColor;
  position: fixed;
  right: 5px;
  top: 45%;
  z-index: 999;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  li {
    width: $width;
    list-style: none;
    cursor: pointer;
    .tubiao {
      width: $width;
      line-height: 39px;
      text-align: center;
      i {
        font-size: 20px;
        font-weight: bold;
      }
    }
    .line {
      margin: 0 auto;
      width: 20px;
      background: $fontColor;
      height: 2px;
    }
  }
}
</style>
